﻿


/* =============================================================
   GENERAL STYLES
 ============================================================ */
body {
    font-family: 'Open Sans', sans-serif;
    line-height: 30px;
    background:url('../img/geometry.png');
}
h2,h3,h4{
    font-family: 'Nova Flat';
}

.noti-div h4{
    padding:10px;
}
.noti-div i {
    display:block;
    padding:5px;
}
.noti-div a,.noti-div a:hover {
    text-decoration:none;
}
section {
    padding:50px 0px 0px 0px;
}
.img-max-width {
    max-width: 270px;
}

/* =============================================================
   HEADER STYLES
 ============================================================ */
#head {
    background:url('../img/binding_dark.png');
    color:#fff;
}
#head #personal{
	display: inline-block;
	float: right;
    height: 46px;
    width: 46px;
    margin: 6px 0;
    border-radius: 50%;
    background-color: #28A4C9;
}
#head .header-mid {
    max-height:65px;
}
 
#head h4 {
    font-size:15px;
    font-weight:500;
}
/* =============================================================
   MAIN SECTION STYLES
 ============================================================ */
#main h3 {
    color:#000;
    padding:0px 0px 10px 0px;
    line-height: 40px;
}
#main .hr-div hr{
    padding-bottom:5px;
   
}
.logout-link {
    margin-bottom:40px!important;
}

    /* =============================================================
   FOOTER STYLES
 ============================================================ */

#footer {
    padding:30px;
     background:url('../img/binding_dark.png');
    color:#fff;
    margin-top:100px;
}
#footer h4{
     font-size:15px;
    font-weight:500;
    height: 26px;
}
    #footer h3 {
        color:#ff8c00;
    }
    #footer span {
        color:#ff8c00;
        margin-right:5px;
    }
    



.search{
	display: inline-block;
	width: 100px;
	height: 30px;

}

/* =============================================================
   PERSONAL PAGE
 ============================================================ */

.clearfix{
	clear: both;
}
.content{
	height: 100%;
}
.userInfo{
	float: left;
	width: 20%;
	height: 100%;
	text-align: center;
	background-color: rgb(242,245,245);
	overflow-y: auto;
}
.userInfo .portrait{
	margin: 7% auto 0;
	height: 140px;
	width: 140px;
	border-radius: 50%;
	overflow: hidden;
}
.userInfo .portrait img{
	width: 100%;
	height: 100%;
}
.userInfo .info div{
	height: 30px;
	margin: 5px 0;
	line-height: 30px;
}
.userInfo .info .name{
	font-size: 22px;
}
.userInfo .social{
	width: 88%;
	height: 70px;
	margin: 25px auto;
	background-color: white;
	box-shadow: 0 1px 1px 1px #EAEEF1;
	border-radius: 2px;
	text-align: center;
	cursor: default;
}
.userInfo .social>span{
	float: left;
	display: inline-block;
	width: 50%;
	height: 100%;
	font-size: 15px;
	font-weight: 300;
}
.userInfo .social>span span{
	display: block;
	margin-top: 14px;
}
.userInfo .profile{
	padding: 0 10%;
	margin: 6% 0 8%;
	word-break: break-all;
	color: darkgray;
	text-align: left;
	font-size: 14px;
}
.userInfo .profile .head{
	margin-bottom: 5px;
	color: #bbb;
}
.menu{
	float: left;
	padding: 5% 2%;
	width: 24%;
	height: 100%;
}
.mySpace{
	float: left;
	height: 100%;
	width: 56%;
}
.mySpace .navBar{
	float: left;
	width: 100%;
	background-color: rgb(237,242,243);
}
.mySpace .navBar ul{
	margin-top: ;
}
.mySpace .navBar ul li{
	float: left;
	display: inline-block;
	width: 100px;
	height: 55px;
	background-color: rgb(237,242,243);
	text-align: center;
	line-height: 55px;
	cursor: pointer;
	transition: all .3s;
}
.mySpace .navBar ul .active li{
	background-color: white !important;
	cursor: default;
}
.mySpace .spaceContent{
	float: left;
	width: 100%;
	height: 100%-55px;
}
.mySpace .spaceContent .show{
	display: block;
}
.mySpace .spaceContent> div{
	display: none;
	overflow-y:auto ;
}
.mySpace .spaceContent .dynamic .message{
	float: left;
	width: 100%;
	height: 90px;
	border-bottom: 1px solid #EAEEF1;
	transition: all .2s;
}
.mySpace .spaceContent .dynamic .message:hover{
	background-color: rgb(252,252,252);
}
.mySpace .dynamic .senderProtrait{
	float: left;
	height: 60px;
	width: 60px;
	margin: 15px 20px 0;
	border-radius: 50%;
	overflow: hidden;
}
.mySpace .dynamic .senderProtrait img{
	width: 100%;
	height: 100%;
}
.mySpace .dynamic .senderName{
	margin: 18px 0 4px;
	font-size: 18px;
	font-weight: 500;
}
.mySpace .dynamic .sendTime{
	float: right;
	margin-right: 20px;
	font-weight: lighter;
	font-size: 16px;
}
.mySpace .dynamic .messageContent{
	color: rgba(84,90,95,.8);
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}


/*--@media--*/
@media only screen and (max-width:750px ) {
	body{
		overflow-y: auto !important;
	}
	.userInfo{
		width: 100%;
		height: auto;
	}
	.mySpace{
		clear: both;
		width: 100%;
		height: auto;
	}
	.mySpace .navBar ul li{
		width: 33.33%;
	}
	.mySpace .spaceContent> div{
		overflow-y: visible;
	}
	.menu{
		width: 100%;
	}
}